﻿<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>投票系统 | 活动结果</title>
      <link rel="shortcut icon" href="assets/images/favicon.ico" />
      <link rel="stylesheet" href="assets/css/backend.min.css">
      <link rel="stylesheet" href="assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
      <link rel="stylesheet" href="assets/vendor/line-awesome/dist/line-awesome/css/line-awesome.min.css">
      <link rel="stylesheet" href="assets/vendor/remixicon/fonts/remixicon.css">
      <link rel="stylesheet" href="assets/vendor/notice/css/bs4.pop.css">
  </head>
  <body class=" color-light ">

    <div class="wrapper">
      <div class="iq-sidebar  sidebar-default ">
          <div class="data-scrollbar" data-scroll="1">
              <div class="new-create select-dropdown input-prepend input-append">
                  <h4>投票系统</h4>
              </div>
              <nav class="iq-sidebar-menu">
                  <ul id="iq-sidebar-toggle" class="iq-menu">
                       <li class="">
                              <a href="index.html" class="">
                                  <i class="las la-home iq-arrow-left"></i><span>主页</span>
                              </a>
                          <ul id="dashboard" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                          </ul>
                       </li>
                  </ul>
              </nav>
              <div class="p-3"></div>
          </div>
          </div>

        <div class="iq-top-navbar">
          <div class="iq-navbar-custom">
              <nav class="navbar navbar-expand-lg navbar-light p-0">
                  <div class="iq-search-bar device-search">

                      <form>
                          <div class="input-prepend input-append">
                              <div class="btn-group">
                                  <label class="dropdown-toggle searchbox" data-toggle="dropdown">
                                  <input class="dropdown-toggle search-query text search-input" id="content" type="text" disabled autocomplete="off"><span class="search-replace"></span>
                                  <a class="search-link" href="javascript:void(0);" id="search"><i class="ri-search-line"></i></a>
                                  <span class="caret"></span>
                                  </label>
                                  <ul class="dropdown-menu">
                                      <li><a href="index.html?status=1"><div class="item"><i class="far bg-secondary"></i>投票未开始</div></a></li>
                                      <li><a href="index.html?status=2"><div class="item"><i class="far bg-primary"></i>投票进行中</div></a></li>
                                      <li><a href="index.html?status=3"><div class="item"><i class="far bg-success"></i>投票已结束</div></a></li>
                                  </ul>
                              </div>
                          </div>
                      </form>
                  </div>

                  <div class="d-flex align-items-center">
                      <div class="change-mode">
                          <div class="custom-control custom-switch custom-switch-icon custom-control-inline">
                              <div class="custom-switch-inner">
                                  <p class="mb-0"> </p>
                                  <input type="checkbox" class="custom-control-input" id="dark-mode" data-active="true">
                                  <label class="custom-control-label" for="dark-mode" data-mode="toggle">
                                      <span class="switch-icon-left"><i class="a-left"></i></span>
                                      <span class="switch-icon-right"><i class="a-right"></i></span>
                                  </label>
                              </div>
                          </div>
                      </div>
                      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"  aria-label="Toggle navigation">
                      <i class="ri-menu-3-line"></i>
                      </button>
                      <div class="collapse navbar-collapse" id="navbarSupportedContent">
                          <ul class="navbar-nav ml-auto navbar-list align-items-center">
                          <li class="nav-item nav-icon search-content">
                              <a href="#" class="search-toggle rounded" id="dropdownSearch" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  <i class="ri-search-line"></i>
                              </a>
                              <div class="iq-search-bar iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownSearch">
                                  <form action="#" class="searchbox p-2">
                                      <div class="form-group mb-0 position-relative">
                                      <input type="text" class="text search-input font-size-12" placeholder="">
                                      <a href="#" class="search-link"><i class="las la-search"></i></a>
                                      </div>
                                  </form>
                              </div>
                          </li>
                          <li class="nav-item nav-icon dropdown">
                              <a href="#" class="search-toggle dropdown-toggle" id="dropdownMenuButton02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                              <i class="ri-settings-3-line"></i>
                              </a>
                          </li>
                          <li class="nav-item nav-icon dropdown caption-content">
                              <a href="#" class="search-toggle dropdown-toggle" id="dropdownMenuButton03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                                  <div class="caption bg-primary line-height">
                                      <img id="head1" style="width: 28px" src="assets/img/default.png">
                                  </div>
                              </a>
                              <div class="iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownMenuButton03">
                                  <div class="card mb-0">
                                      <div class="card-header d-flex justify-content-between align-items-center mb-0">
                                          <div class="header-title">
                                              <h4 class="card-title mb-0" id="name"></h4>
                                          </div>
                                          <div class="close-data text-right badge badge-primary cursor-pointer "><i class="ri-close-fill"></i></div>
                                      </div>
                                      <div class="card-body">
                                          <div class="profile-header">
                                              <div class="cover-container text-center">
                                                  <div class="rounded-circle profile-icon bg-primary mx-auto d-block">
                                                      <a href="page-user.html">
                                                          <img id="head2" style="width: 66px;" src="assets/img/default.png">
                                                      </a>
                                                  </div>
                                                  <div class="profile-detail mt-3">
                                                      <h5><a href="#" id="username"></a></h5>
                                                  </div>
                                                  <p></p>
                                                  <span id="info"></span>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </li>
                          </ul>
                      </div>
                  </div>
              </nav>
          </div>
      </div>
      <div class="content-page">
      <div class="container-fluid">
        <div class="row">

            <div class="col-sm-12 col-lg-12 col-md-12">
                <div class="card">

                    <div class="card-header d-flex justify-content-between">
                        <div class="header-title">
                            <h4 class="card-title" id="title"></h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <p>活动发起：<span id="publish"></span></p>
                        <p>活动介绍：<span id="desc"></span></p>
                        <p>投票开始：<code id="startTime"></code></p>
                        <p>投票结束：<code id="endTime"></code></p>
                        <hr/>
                        <img id="pic" src="" class="img-fluid rounded" alt="Responsive image">
                        <hr/>
                        <p>活动规则：</p>
                        <p id="rule"></p>
                        <hr/>


                        <div class="header-title">
                            <h5 class="card-title">投票结果：</h5>
                        </div>
                        <div class="iq-avatars d-flex flex-wrap align-items-center" >
                            <ul class="list-inline p-0 m-0" id="option">


                            </ul>
                        </div>


                    </div>


                </div>
            </div>

        </div>

      </div>
      </div>
    </div>



    <footer class="iq-footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item"><a href="privacy-policy.html">© www.gaoyiguan.cn - </a></li>
                        <li class="list-inline-item"><a href="terms-of-service.html">投票系统-课设项目 © 版权所有</a></li>
                    </ul>
                </div>
                <div class="col-lg-6 text-right">
                    Copyright 2021 <a href="#">投票系统</a> All Rights Reserved.
                </div>
            </div>
        </div>
    </footer>
    <script src="assets/js/jquery-1.8.3.min.js"></script>
    <script src="assets/js/backend-bundle.min.js"></script>
    <script src="assets/js/customizer.js"></script>
    <script src="assets/js/chart-custom.js"></script>
    <script src="assets/js/app.js"></script>
    <script src="assets/vendor/notice/js/bs4.pop.js"></script>
    <script src="assets/vendor/notice/bootstrap-4.0.0-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">

        //投票结果
        result(getUrlParam('id'));

        //用户登陆信息
        userInfo();

        /**
         * 获取投票结果
         * @param id
         */
        function result(id) {
            $.ajax({
                url: 'user-result/result',
                type: 'get',
                data:{
                    id: id
                },
                dataType: 'json',
                success: function (result) {
                    if (200 == result.code) {
                        $("#title").html(result.data.projectName);
                        $("#publish").html(result.data.publishName);
                        $("#desc").html(result.data.projectDesc);
                        $("#startTime").html(result.data.projectStart);
                        $("#endTime").html(result.data.projectEnd);
                        if (0 == result.data.projectChoice) {
                            $("#rule").html("1、每个账号每天最多可投 <code>"+ result.data.projectRule +"</code> 票，只能为同一参选者投票（单选）。<br> 2、所有公司员工、员工亲友均可参与投票。<br> 3、严禁作弊行为，严禁网络刷票，水军群等，一经发现取消参选资格。");
                        }else {
                            $("#rule").html("1、每个账号每天最多可投 <code>"+ result.data.projectRule +"</code> 票，可为同一参选者或者不同参选者投票（多选）。<br> 2、所有公司员工、员工亲友均可参与投票。<br> 3、严禁作弊行为，严禁网络刷票，水军群等，一经发现取消参选资格。");
                        }
                        $("#pic").prop("src", result.data.projectImg);

                        var records = result.data.records;
                        for (var i = 0; i < records.length; i++) {
                            appendOptionList(records[i]);
                        }

                    }
                }
            });
        }

        /**
         * 投票选项拼接
         * @param item
         */
        function appendOptionList(item) {
            $("#option").append("<li class=\"d-flex align-items-center mb-3\">\n" +
                "                                    <div class=\"col-xl-2 col-lg-5\">\n" +
                "                                        <img class=\"avatar-60 rounded-circle\" src='"+ item.img +"' alt='"+ item.name +"' data-original-title=\"\" title='"+ item.name +"'>\n" +
                "                                    </div>\n" +
                "                                    <div class=\"col-xl-10 col-lg-7\">\n" +
                "                                       <div class=\"progress\">\n" +
                "                                           <div class=\"progress-bar progress-bar-striped progress-bar-animated bg-success\" role=\"progressbar\" aria-valuenow='"+ item.result +"' aria-valuemin='0' aria-valuemax='100' style='width: "+ item.result +"%'>"+ item.grade +"</div>\n" +
                "                                       </div>" +
                "                                    </div>\n" +
                "                                </li>\n" +
                "                                <li class=\"d-flex align-items-center mb-3\">\n" +
                "                                    <div class=\"pl-3\">\n" +
                "                                        <code>"+ item.name +"</code>\n" +
                "                                        <p class=\"mb-0\" style=\"width: 660px\"></p>\n" +
                "                                    </div>\n" +
                "                                </li><hr>");
        }

        /**
         * 投票
         * @param obj
         */
        function vote(obj) {
            var id = $(obj).prop("id");
            var grade = $(obj).attr("grade");
            $.ajax({
                url: 'user-detail/vote',
                type: 'put',
                data: {
                  id : id
                },
                dataType: 'json',
                success: function (result) {
                    if (200 == result.code) {
                        var span = $(obj).children()[0];
                        var count = parseInt(vote) + 1;
                        $(span).html(result.data);
                        bs4pop.notice("投票成功！", {type: 'success', position: 'center'});
                    }else{
                        console.info(result.message);
                        bs4pop.notice(result.message, {type: 'danger', position: 'center'});
                    }
                }
            });
        }

        /**
         * 登陆信息
         */
        function userInfo() {
            $.ajax({
                url: 'user-index/info',
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    if (200 == result.code) {
                        $("#name").html(result.data.name);
                        $("#info").html("<a onclick='exit()' class='btn btn-primary'>退出登陆</a>");
                    }else {
                        $("#name").html("欢迎使用");
                        $("#info").html("<a href='login.html' class='btn btn-primary'>点击登录</a>");
                    }
                }
            });
        }

        /**
         * 退出登陆
         */
        function exit() {
            bs4pop.confirm('你确定要退出登录吗？', function(sure){
                if (sure == false) return;

                $.ajax({
                    url: 'user-index/exit',
                    type: 'delete',
                    dataType: 'json',
                    success: function (result) {
                        if (200 == result.code) {
                            location.href = 'login.html';
                        }
                    }
                });
            });
        }

        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        };
    </script>
  </body>
</html>